<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="../css/myStyle.css" />
<link type="text/css" rel="stylesheet" href="../css/demo.css" />
<link rel="stylesheet" type="text/css" href="../css/style2.css" />
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-1.7.2.min.js"></script>
<div id="myCarousel" class="carousel slide"" style="width:1004px; margin:auto;">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img src="../Picture/1.jpg" alt="1" class="img-responsive"></img>
        </div>
        <div class="item">
          <img src="../Picture/2.jpg" alt="2" class="img-responsive"></img>
        </div>
        <div class="item">
          <img src="../Picture/3.jpg" alt="3" class="img-responsive"></img>
        </div>
        <div class="item">
          <img src="../Picture/4.jpg" alt="4" class="img-responsive"></img>
        </div>
      </div>
      <a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="icon-prev"></span></a> <a
        class="carousel-control right" href="#myCarousel" data-slide="next"><span class="icon-next"></span></a>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script>
  $('.carousel').carousel({
      interval:3000
  });
  </script>